<template>
  <div style="width: 100%;height: 100%;">
    <el-row :gutter="20">
      <el-col :span="7">
        <div class="grid-content bg-purple" style="width: 100%;">

          <table style="width: 100%;">

            <tr style="background:#749aec">
              <th style="padding:5px 0" colspan="3">地质灾害检测进展概况</th>
            </tr>
            <tr>
              <th rowspan="5">

                <svg t="1725976190151" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="4298" width="80" height="80">
                  <path
                    d="M298.666667 341.333333h384v42.666667H298.666667v-42.666667z m0 128h298.666666v42.666667H298.666667v-42.666667z m0 128h298.666666v42.666667H298.666667v-42.666667z m0-469.376C298.666667 104.405333 317.824 85.333333 341.12 85.333333h341.76C706.304 85.333333 725.333333 104.490667 725.333333 127.957333v42.752A42.645333 42.645333 0 0 1 682.88 213.333333H341.12C317.696 213.333333 298.666667 194.176 298.666667 170.709333V127.957333zM170.666667 938.666667h682.666666c23.68 0 42.666667-19.157333 42.666667-42.773334V170.773333C896 147.093333 876.842667 128 853.205333 128h-63.296v42.666667h63.296c0.128 0.106667 0.170667 725.333333 0.128 725.333333H170.666667V170.773333C170.752 170.709333 236.16 170.666667 236.16 170.666667V128H170.752A42.752 42.752 0 0 0 128 170.773333v725.12A42.666667 42.666667 0 0 0 170.666667 938.666667z m170.666666-768h341.333334V128H341.333333v42.666667z"
                    fill="#3D3D3D" p-id="4299"></path>
                </svg>


              </th>
              <th>流程</th>
              <th>已完成</th>
            </tr>
            <tr>
              <!-- <th></th> -->
              <th>采集（次）</th>
              <th>13</th>
            </tr>
            <tr>
              <!-- <th></th> -->
              <th>区域（次）</th>
              <th>90</th>
            </tr>
            <tr>
              <!-- <th></th> -->
              <th>建模（项）</th>
              <th>64</th>
            </tr>
            <tr>
              <!-- <th></th> -->
              <th>分析（项）</th>
              <th>73</th>
            </tr>






          </table>


          <table style="width: 100%;margin-top:10px">

            <tr style="background:#749aec">
              <th style="padding:5px 0" colspan="4">地质灾害检测历史记录</th>
            </tr>

            <tr>
              <th>采集项</th>
              <th>裂缝</th>
              <th>滑坡</th>
              <th>沉降</th>
            </tr>

            <tr v-for="item in datas">
              <th>{{ item.data1 }}</th>
              <th>{{ item.data2 }}</th>
              <th>{{ item.data3 }}</th>
              <th>{{ item.data4 }}</th>
            </tr>

          </table>


        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content bg-purple">
          <img style="width: 100%;" src="../../assets/map.png" alt="">
        </div>
      </el-col>
      <el-col :span="7">
        <div class="grid-content bg-purple">


          <table style="width: 100%;">

            <tr style="background:#749aec">
              <th style="padding:5px 0" colspan="4">地质灾害处理</th>
            </tr>

            <!-- <tr>
              <th>采集项</th>
              <th>裂缝</th>
              <th>滑坡</th>
              <th>沉降</th>
            </tr> -->

            <tr>
              <th>待处理
                <span style="background:#e46034;color:#fff;font-size:12px;font-weight: 400;padding:0 1px">0</span>
              </th>
              <th>未解决
                <span style="background:#313f4c;color:#fff;font-size:12px;font-weight: 400;padding:0 1px">0</span>
              </th>
              <th>已解决
                <span style="background:#313f4c;color:#fff;font-size:12px;font-weight: 400;padding:0 1px">0</span>
              </th>
              <th>以忽略
                <span style="background:#313f4c;color:#fff;font-size:12px;font-weight: 400;padding:0 1px">0</span>
              </th>
            </tr>
          </table>






          <table style="width: 100%;margin-top: 10px;">

            <!-- <tr>
              <th rowspan="5">模型文件</th>
              <th colspan="4"></th>
            </tr> -->

            <tr>
              <th style="width:120px;padding:50px 0">模型文件</th>
              <th colspan="3"></th>
            </tr>

            <tr>
              <th style="width:120px;padding:50px 0">经纬度</th>
              <th colspan="3"></th>
            </tr>

            <tr>
              <th style="width:120px;padding:50px 0">现场图片</th>
              <th colspan="3"></th>
            </tr>


            <tr>
              <th style="width:120px;padding:50px 0">标记图片</th>
              <th colspan="3"></th>
            </tr>






          </table>


          <div class="box">
            <div style="margin-left:0">上一项</div>
            <div>标记</div>
            <div>已解决</div>
            <div>忽略</div>
            <div style="margin-right:0">下一项</div>
          </div>





        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      datas: [
        // {
        //   data1: "2023-05-30",
        //   data2: 54,
        //   data3: 65,
        //   data4: 0,
        // }, {
        //   data1: "2023-05-30",
        //   data2: 54,
        //   data3: 65,
        //   data4: 0,
        // }, {
        //   data1: "2023-05-30",
        //   data2: 54,
        //   data3: 65,
        //   data4: 0,
        // }, {
        //   data1: "2023-05-30",
        //   data2: 54,
        //   data3: 65,
        //   data4: 0,
        // }, {
        //   data1: "2023-05-30",
        //   data2: 54,
        //   data3: 65,
        //   data4: 0,
        // }, {
        //   data1: "2023-05-30",
        //   data2: 54,
        //   data3: 65,
        //   data4: 0,
        // }, {
        //   data1: "2023-05-30",
        //   data2: 54,
        //   data3: 65,
        //   data4: 0,
        // }, {
        //   data1: "2023-05-30",
        //   data2: 54,
        //   data3: 65,
        //   data4: 0,
        // }, {
        //   data1: "2023-05-30",
        //   data2: 54,
        //   data3: 65,
        //   data4: 0,
        // }, {
        //   data1: "2023-05-30",
        //   data2: 54,
        //   data3: 65,
        //   data4: 0,
        // }, {
        //   data1: "2023-05-30",
        //   data2: 54,
        //   data3: 65,
        //   data4: 0,
        // }, {
        //   data1: "2023-05-30",
        //   data2: 54,
        //   data3: 65,
        //   data4: 0,
        // }, {
        //   data1: "2023-05-30",
        //   data2: 54,
        //   data3: 65,
        //   data4: 0,
        // }, {
        //   data1: "2023-05-30",
        //   data2: 54,
        //   data3: 65,
        //   data4: 0,
        // }, {
        //   data1: "2023-05-30",
        //   data2: 54,
        //   data3: 65,
        //   data4: 0,
        // },
      ]
      // welcomeMessage: '欢迎进入员工系统后台',
      // like: true,
      // value1: 4154.564,
      // value2: 1314,
      // title: "增长人数",
    }
  }
}
</script>

<style scoped>
table {
  border-collapse: collapse;
}

tr,
td,
th {
  border: 1px solid #ccc;
}

.box {
  display: flex;
  width: 100%;
}

.box div {
  background: #f7e9c2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 2px 0;
  margin: 0 2px;
  margin-top: 10px;
  cursor: pointer;
}
</style>